<template>
  <div class="mod-prod-sku-table">
    <el-form-item>
      <el-table
          :data="value"
          border
          style="width: 100%; margin-top: 20px"
          :row-class-name="tableRowClassName"
          :span-method="tableSpanMethod">
        <el-table-column prop="picurl"
                         label="缩略图片"
                         width="180">
          <template slot-scope="scope">
            <pic-upload v-model="scope.row.picurl">
            </pic-upload>
          </template>
        </el-table-column>
        <el-table-column
            prop="pname"
            label="项目名称"
            width="250"  >
          <template slot-scope="scope">
            <el-input v-model="scope.row.pname" type="textarea" ></el-input>
          </template>
        </el-table-column>
        <el-table-column
            prop="picorder"
            label="显示顺序"
            width="160">
          <template slot-scope="scope">
            <el-input-number
                size="small"
                v-model="scope.row.picorder"
                controls-position="right"
                :precision="2"
                :max="200"
                :min="1"
                :disabled="!scope.row.status">
            </el-input-number>
          </template>
        </el-table-column>
        <el-table-column
            prop="pictype"
            label="类型"
            width="160">
          <template slot-scope="scope">
            <el-select v-model="scope.row.pictype" placeholder="请选择类型">
              <el-option label="主图" value="1"></el-option>
              <el-option label="副图" value="2"></el-option>
            </el-select>
          </template>
        </el-table-column>

        <el-table-column
            label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-if="scope.row.status">禁用</el-button>
            <el-button type="text" size="small" @click="changeSkuStatus(`${scope.$index}`)" v-else>启用</el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-form-item>
  </div>
</template>
<script>
import PicUpload from '@/components/pic-upload'
export default {
  data () {
    return {
      // 数据库中的规格
      dbSpecs: [],
      // 根据选定的规格所查询出来的规格值
      dbSpecValues: [],
      specs: [], // 使用的规格
      initing: false
    }
  },
  components: {
    PicUpload
  },
  props: {
    value: {
      default: [],
      type: Array
    },
    prodName: {
      default: ''
    }
  },
  watch: {

  },
  // activated: function () {
  //   this.$emit('input', [Object.assign({}, this.defalutSku)])
  // },
  created: function () {
    this.$http({
      url: this.$http.adornUrl(`/project/getProjectPiclist`),
      method: 'get',
      params: this.$http.adornParams()
    }).then(({data}) => {
      this.dbSpecs = data
    })
  },
  computed: {
    tableLeftTitles () {
      let res = []
      for (let i = 0; i < this.skuTags.length; i++) {
        const skuTag = this.skuTags[i]
        res.push(skuTag.tagName)
      }
      return res
    },
    skuTags: {
      get () { return this.$store.state.prod.skuTags }
    },
    defalutSku () {
      return this.$store.state.prod.defalutSku
    }
  },
  methods: {
    handleAdd(index, row) {
      this.tableData.push({
        date: '',
        name: '',
        addr: ''
      })
    },
    handleDelete(index, row) {
      if (index > 0) {
        this.tableData.splice(index, 1)
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if ((rowIndex+1)%2 === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss">

.mod-prod-sku-table{
  .pic-uploader-component .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    .pic-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }
    .pic {
      width: 120px;
      height: 120px;
      display: block;
    }
  }
  .pic-uploader-component .el-upload:hover {
    border-color: #0061a8;
  }
}
</style>
